import { useState, useEffect } from 'react';
import { Rate } from 'antd';
import { HeartOutlined } from '@ant-design/icons';

const RateItem = (props) => {
  const [val, setVal] = useState();

  useEffect(() => {
    setVal(props.value);
  }, []);

  const handleChangeCount = (value) => {
    setVal(value ? Number(value) * 2 : 0);
    props.onChange(value ? Number(value) * 2 : 0);
  };
  return (
    <div>
      <Rate
        onChange={(val) => {
          handleChangeCount(val);
        }}
        value={val ? Number(val) / 2 : 0}
        character={<HeartOutlined theme="filled" />}
        allowHalf
        disabled={props.disabled}
      />
    </div>
  );
};

export default RateItem;
